<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- <link rel="stylesheet" href="css/swiper-bundle.min.css"> -->
</head>

<body>
    <header class="bg_white">
        黑马面面
    </header>
    <!-- nav导航 -->
    <section class="nav bg_white">
        <ul class="nav_content">
            <li class="nav_items">
                <a href="#">
                    <img src="icons/icon1.png" alt="">
                    <span>HR面试</span>
                </a>
            </li>
            <li class="nav_items">
                <a href="#">
                    <img src="icons/icon1.png" alt="">
                    <span>HR面试</span>
                </a>
            </li>
            <li class="nav_items">
                <a href="#">
                    <img src="icons/icon1.png" alt="">
                    <span>HR面试</span>
                </a>
            </li>
            <li class="nav_items">
                <a href="#">
                    <img src="icons/icon1.png" alt="">
                    <span>HR面试</span>
                </a>
            </li>
            <li class="nav_items">
                <a href="#">
                    <img src="icons/icon1.png" alt="">
                    <span>HR面试</span>
                </a>
            </li>
            <li class="nav_items">
                <a href="#">
                    <img src="icons/icon1.png" alt="">
                    <span>HR面试</span>
                </a>
            </li>
        </ul>
        <!-- go -->
        <a href="#" class="go">
            <img src="icons/go.png" alt="">
        </a>
    </section>

    <!-- 轮播图大模块 -->
    <section class="lunbo bg_white">
        <!-- 头部 -->
        <div class="lunbo_hd">
            <h4>
                <img src="icons/i1.png" alt="">
                就业指导<span>更多 >></span>
            </h4>
        </div>
        <!-- Swiper -->
        <div class="lunbo_bd">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="images/pic.png" alt="">
                        <p>pink老师教你学编程</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/2.jpg" alt="">
                        <p>你看我几分像从前</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/3.jpg" alt="">
                        <p>阿祖收手吧，外面全是德华</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/ldh.jpg" alt="">
                        <p>给我一杯忘情水</p>
                    </div>
                </div>
            </div>
            <!-- 箭头 -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>

    <!-- 充电学习模块 -->
    <section class="study bg_white">
        <!-- 头部 -->
        <div class="study_hd">
            <h4>
                <img src="icons/i2.png" alt="">
                充电学习<span>更多 >></span>
            </h4>
        </div>
        <!-- Swiper -->
        <div class="study_bd">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="images/pic1.png" alt="">
                        <h5>
                            最难是坚持，坚持就是胜利！
                        </h5>
                        <p><span>999</span>人学习</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/pic2.png" alt="">
                        <h5>
                            打赢前端攻坚战，我们终将迎来黎明!
                        </h5>
                        <p><span>999</span>人学习</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/pic1.png" alt="">
                        <h5>
                            最难是坚持，坚持就是胜利！
                        </h5>
                        <p><span>999</span>人学习</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/pic2.png" alt="">
                        <h5>
                            打赢前端攻坚战，我们终将迎来黎明!
                        </h5>
                        <p><span>999</span>人学习</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/pic1.png" alt="">
                        <h5>
                            最难是坚持，坚持就是胜利！
                        </h5>
                        <p><span>999</span>人学习</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/pic2.png" alt="">
                        <h5>
                            打赢前端攻坚战，我们终将迎来黎明!
                        </h5>
                        <p><span>999</span>人学习</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- footer -->
    <footer class="footer">
        <a href="#" class="item">
            <img src="icons/footer1.png" alt="">
            <p>首页</p>
        </a>
        <a href="#" class="item">
            <img src="icons/footer2.png" alt="">
            <p>技术面试</p>
        </a>
        <a href="#" class="item">
            <img src="icons/footer3.png" alt="">
            <p>模拟面试</p>
        </a>
        <a href="#" class="item">
            <img src="icons/footer4.png" alt="">
            <p>我的主页</p>
        </a>
    </footer>



    <script src="js/flexible.js"></script>
    <script src="js/swiper.min.js"></script>
    <!-- <script src="js/swiper-bundle.min.js"></script> -->
    <!-- Initialize Swiper -->
    <script>
        (function () {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 3,
                spaceBetween: 30,
                centeredSlides: true,
                loop: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        })();
        // 注意：多个立即执行函数之间一定要加分号
        (function () {
            var swiper = new Swiper(".mySwiper", {
                slidesPerView: 2.4,
                spaceBetween: 30,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });
        })()
    </script>
</body>

</html>